<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" href="../Ryancss/base.css">
    <link rel="stylesheet" href="../Ryancss/game_zhibo.css">
    <style>

      /*新加空提示信息*/

      .m-noRecord {
        padding: .395rem 0 0;
        text-align: center;
    }

    .m-noRecord .c-icon-noRecord {
        background: url(../image/app/Loading2.gif) no-repeat;
        background-size: cover;
      width: 15rem;
      height: 10rem;
      /* margin: .485rem auto 0; */
      margin: 0 auto;
    }
    .m-noRecord .c-info {
        background: linear-gradient(to right, #ffd74c, #c7752e);
        -webkit-background-clip: text;
        color: transparent;
        /* color: #cecfce;  */
        line-height: 4rem;
        padding: .25rem 0;
        font-size: .8rem;
    }

    </style>

</head>

<body>







    <div class="aui-tab" style=" background: #fff; ">
            <div class="tab-panel">
                <div class="tab-panel-item tab-active">
                    <div class="tab-item">
                        <a class="aui-flex b-line">
                            <div class="aui-flex-iphone">
                                <img src="">
                            </div>
                            <div class="aui-flex-box">
                              <p>
                                  <em class="aui-group-three" style=" font-size: 12px; "> 游戏在线直播</em>
                              </p>
                                <h3 style=" font-size: 10px; ">各类游戏 海量主播</h3>
                                <p>
                                    <em class="aui-group-two" style=" font-size: 12px; ">实时更新</em> <em class="aui-group-two" style=" font-size: 12px; ">知名主播</em>
                                </p>

                            </div>
                            <div class="aui-flex-support" style=" font-size: 12px; " onclick="baocuo()"  >报错</div>
                        </a>


                    </div>
                </div>


            </div>
        </div>







  <div class="wrap">
    <!-- 游戏 -->
    <div class="game-page-zhubo">

      <!-- 视频列表 -->
    <div class="game-list-wrap-zhubo" id="liveList">
      <ul class="clearfix" id="div_list">

        <!--加载提示-->
        <section class="m-noRecord"><div class="c-icon-noRecord"></div> <div class="c-info">奋力加载中...</div></section>
        <!--加载提示-->
		

      </ul>
    </div>
    <!-- 视频列表 end-->

    </div>
    <!-- 游戏 end-->
  </div>
</body>
<script type="text/x-dot-template" id="template">
{{~ it : value : index }}

/*
    <li onclick="openWin('{{= value. video }}')">
      <div class="video-mask-box">
        <img src="{{= value. img }}" alt="" class="game-pic">
      </div>
      <div class="til">{{= value. name }}</div>
      <div class="detail clearfix">
        <p class="anchor clearfix">
          <i class="icon-m icon-ic_man"></i><span>{{= value. nickname }}</span>
        </p>
      </div>
    </li>
*/
    <li>
      <div class="game-a" onclick="openWin('{{= value. video }}','{{= value. name }}','{{= value. nickname }}')">
        <img src="{{= value. img }}" alt="">
          <em class="aui-group-three" style=" font-size: 12px; "> {{= value. name }}</em>
        <p>
            <em class="aui-group-one" style=" font-size: 12px; ">主播：</em> <em class="aui-group-two" style=" font-size: 12px; ">{{= value. nickname }}</em>
        </p><br>
      </div>
    </li>


{{~}}
</script>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">
  var api_url = localStorage.getItem('api_url');
  var i = 1;

  /////  初始化执行   S /////
  /////  apiready  一打开就执行的 函数

  apiready = function(){
  
  /*
    api.showProgress({
        title: '加载中...',
        modal: false
    });
	*/
	
	
    getList();

    api.addEventListener({
        name:'scrolltobottom',
        extra:{
            threshold:0
        }
    }, function(ret, err){
      showData();
    });

  }

/////  初始化执行   E /////


//////////////////////   获取游戏直播间列表  方法   getList    S //////////////////////
  function getList(){
    var div_list = $api.byId('div_list');
    var template = $api.byId('template');
    api.ajax({
        url: 'http://mk.ikmovie.xyz/api/gamezhibo.php',
        method: 'get',
        data: {
            values: {
                lx: 'hqzb',
                ys: i,
                id: api.pageParam.id
            }
        }
    },function(ret, err){
        if (ret) {
            //alert( JSON.stringify( ret ) );
            var pagefn = doT.template(template.text);
            div_list.innerHTML = pagefn(ret);
            api.hideProgress();
        } else {
          api.hideProgress();
            //alert( JSON.stringify( err ) );
        }
    });


  }
//////////////////////   获取游戏直播间列表  方法   getList    E //////////////////////

//////////////////////   ***  方法   showData    S //////////////////////
  function showData(){
    i = i+1;
    var div_list = $api.byId('div_list');
    var template = $api.byId('template');
    api.ajax({
        url: 'http://mk.ikmovie.xyz/api/gamezhibo.php',
        method: 'get',
        data: {
            values: {
              lx: 'hqzb',
              ys: i,
              id: api.pageParam.id
            }
        }
    },function(ret, err){
        if (ret) {
            //alert( JSON.stringify( ret ) );
            var pagefn = doT.template(template.text);
            div_list.innerHTML += pagefn(ret);
        } else {
            //alert( JSON.stringify( err ) );
        }
    });

  }
//////////////////////   ***  方法   showData    E //////////////////////


//////////////////////   打开直播间  方法         S //////////////////////
  function openWin(name,title,nickname){

 				//播放器判断
				//1 本地播放器(V1)   2 本地播放器(V2)
				if(localStorage.getItem('Player_selection') == 1){		
				
                                         var delay = 0;
                                         if(api.systemType != 'ios'){
                                             delay = 300;
                                         }
                                         api.openWin({
                                             name: 'game_play_win',
                                             url: 'game_play_win.html',
                                             bounces:false,
                                             delay: delay,
                                             slidBackEnabled:true,
                                             vScrollBarEnabled:false,
                                             pageParam:{video:'http://alhls.cdn.zhanqi.tv/zqlive/'+name+'.m3u8',video_flv:'https://dlhdl-cdn.zhanqi.tv/zqlive/'+name+'.flv',title:title,zhubo:nickname}
                                         });


							
				}else if(localStorage.getItem('Player_selection') == 2){
				
						 	fnvideoPlayerPlay('https://dlhdl-cdn.zhanqi.tv/zqlive/'+name+'.flv',title);
				
				}
				




    }
//////////////////////   打开直播间  方法        E //////////////////////








    function fnvideoPlayerPlay(video,title) {
        var videoPlayer = api.require('videoPlayer');
		videoPlayer.forward({
			seconds: 30
		});
        videoPlayer.play({
      /*      texts: {
                head: {
                    title: title+'播放'
                }
            },*/
            styles: {
                head: {								 //（可选项）JSON对象；播放器顶部导航条样式    	
                    bg: 'rgba(0.5,0.5,0.5,0.7)',		 //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
                    height: 44,							     //（可选项）数字类型；顶部导航条的高；默认：44
                    titleSize: 15,							  //（可选项）数字类型；顶部标题字体大小；默认：20
                    titleColor: '#fff',							 //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
                    backSize: 25,								//（可选项）数字类型；顶部返回按钮大小；默认：44
                    backImg: 'widget://Ryanimg/user/Close.png',		//（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
                    setSize: 25,										//（可选项）数字类型；顶部右边设置按钮大小；默认：44
                    setImg: 'widget://Ryanimg/user/setup.png'			//（可选项）字符串类型；顶部右边设置按钮背景图片，要求本地路径（widget://、fs://）；默认：设置小图标
                },		
                foot: {							 //（可选项）JSON对象；播放器底部导航条样式    	
                    bg: 'rgba(0.5,0.5,0.5,0.7)',			//（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
                    height: 44,								//（可选项）数字类型；底部导航条的高；默认：44
                    playSize: 25,							//（可选项）数字类型；底部播放/暂停按钮大小；默认：44
                    playImg: 'widget://Ryanimg/user/play.png',			//（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
                    pauseImg: 'widget://Ryanimg/user/pause.png',			//（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
                    nextSize: 25,											//（可选项）数字类型；底部下一集按钮大小；默认：44
					nextImg:'widget://Ryanimg/user/pns.png',  				//（可选项）字符串类型；底部下一集按钮的背景图片，要求本地路径（widget://、fs://）；默认：下一集按钮图标
                    timeSize: 14,									 //（可选项）数字类型；底部时间标签大小；默认：14
                    timeColor: '#fff',					    //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
                    sliderImg: 'widget://image/videoPlayer/unfullscreen.png',					//（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
                    progressColor: '#696969',			 //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
                    progressSelected: '#1296db',			 //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
                    verticalImg: "widget://Ryanimg/user/ExitFullScreen.png",		 //（可选项）字符串类型；底部竖屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：竖屏按钮图标              
                    horizontalImg: "widget://Ryanimg/user/fullscreen.png"			//（可选项）字符串类型；底部横屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：横屏按钮图标
                }
            },
			  
            coverImg: "widget://image/videoPlayer/fullscreen.png",		//	（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）
            path: video,		//	（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget	
			seekBarDragable: true,		//	（可选项） 播放进度条是否可以拖动
			autorotation: false,	//	（可选项）视频播放页面是否支持自动旋转（横竖屏），若为 false 则手动点击右下角按钮旋转
            autoPlay: true					//（可选项）打开时是否自动播放		默认值：true（自动播放）
        }, function(ret, err) {
            if (ret) {
			
			
 // alert(JSON.stringify(ret));	    /**/															
	

				if(ret.eventType == 'show'){
				
				
				/*
																api.toast({
																	msg: '打开成功并显示',
																	duration: 11000,
																	location : 'middle' 
																});
				*/
			
				}else if(ret.eventType == 'back'){
				
				
														/*		api.toast({
																	msg: '返回',
																	duration: 1000,
																	location : 'middle' 
																});
																*/
			var videoPlayer = api.require('videoPlayer');
			videoPlayer.close();
				
				}else if(ret.eventType == 'play'){
				
				
																api.toast({
																	msg: '播放',
																	duration: 1000,
																	location : 'middle' 
																});
				
				
				
				}else if(ret.eventType == 'pause'){
				
				
																api.toast({
																	msg: '暂停',
																	duration: 1000,
																	location : 'middle' 
																});
				
				
				
				}else if(ret.eventType == 'next'){
				
				
																api.toast({
																	msg: '下一集',
																	duration: 1000,
																	location : 'middle' 
																});
				
				
				
				}else if(ret.eventType == 'failed'){
				
				
																api.toast({
																	msg: '播放失败',
																	duration: 1000,
																	location : 'middle' 
																});
				
				
				 
				}

 


            } else {
    alert(JSON.stringify(err));
            }
        });
    }











//////////////////////    报错按钮打开 方法 baocuo  S  //////////////////////
    function baocuo(){

          api.toast({
              msg: '开发中'
          });
    }
//////////////////////    报错按钮打开 方法 baocuo  E  //////////////////////



</script>
</html>
